<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>使用柯里化优化</title>
</head>

<body>
	<div id="container"></div>

	<script src="../js-react/react@16.development.js"></script>
	<script src="../js-react/react-dom@16.development.js"></script>
	<script src="../js-react/babel@6.min.js"></script>

	<script type="text/babel">
        /*
            在受控组件中，每个intput都得创建一个函数，可通过函数柯里化（高阶函数）优化成一个函数
        */
		class Login extends React.Component {
            // 初始化
            state = {
                username: '',
                password: ''
            }

            saveFormData = (dataType) => {
                return (e) => {
					this.setState({[dataType]: e.target.value})
					// js 语法 ==> 对象属性原本为字符串类型，但是为了简写，把引号''省略了，所以如果按如下写法，将给state对象新增一个'dataType'属性
					// 使用[]的作用是取变量dataType的值作为属性名
					// this.setState({dataType: e.target.value})
				}
            }

			handleSubmit = (event) => {
				event.preventDefault()	// 阻止事件默认处理方式 ==> 此处为表单提交
				const {username, password} = this.state
				alert(`您输入的用户名是:${username}，密码是:${password}`)
			}

			render() {
				return (
					<form action={this.props.action} onSubmit={this.handleSubmit}>
						用户：<input onChange={this.saveFormData('username')} type="text" name="username"/><br/>
						密码：<input onChange={this.saveFormData('password')} type="password" name="password"/><br/>
						<button>登录</button>
					</form>
				)
			}
		}

		ReactDOM.render(<Login action="https://www.baidu.com"/>, document.getElementById('container'))
	</script>
</body>

</html>